<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    label="商品图"
                    width="180"
                    align="center"
            >
                <template scope="scope">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.head_img"
                            :preview-src-list="[scope.row.head_img]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="product_name"
                    label="商品名称"
                    align="center"
                    width="300">
            </el-table-column>
            <el-table-column
                    label="供货商"
                    align="center"
                    width="180">
                <template scope="scope">
                    {{scope.row.supplier_content.supplier_name}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="integral"
                    align="center"
                    label="所需积分">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template scope="scope">
                    <el-button type="text" @click="resetProduct(scope.row)" v-if="$store.state.system_type == 0">修改</el-button>
                    <el-button type="text" @click="checkProduct(scope.row)">查看</el-button>
                    <el-popover
                            placement="top"
                            style="margin-left: 10px"
                            width="400"
                            title="提示"
                            v-model="scope.row.visible"
                            :ref="`popover-${scope.$index}`"
                    >
                        <slot>是否确认删除积分商品商品 “{{scope.row.product_name}}”？</slot>
                        <div style="text-align: right; margin: 0">
                            <el-button size="mini" type="text" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
                            <el-button type="primary" size="mini" @click="delProduct(scope.row, scope.$index)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text"  v-if="$store.state.system_type == 0">删除</el-button>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
        <reset-dialog ref="resetDialog" :type="typeVal" :formData="formData" @reloadFun="reloadFun" />
    </div>
</template>

<script>
    import resetDialog from './add-product.vue'
    export default {
        name: "product-list.vue",
        components: {
            resetDialog
        },
        props: {
            tabData: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        data() {
            return {
                // visible: false
                typeVal: '2',
                formData: {}
            }
        },
        computed: {
            tableData() {
                let tableData = this.tabData
                for(let i in tableData){
                    tableData[i].visible = false
                }
                return tableData
            }
        },
        methods: {
            resetProduct(row) {
                // console.log(row);
                this.$refs.resetDialog.dialogFormVisible = true
                this.$refs.resetDialog.form = JSON.parse(JSON.stringify(row))
                this.$refs.resetDialog.isDisabled= false
            },
            checkProduct(row) {
                this.$refs.resetDialog.dialogFormVisible = true
                this.$refs.resetDialog.form = JSON.parse(JSON.stringify(row))
                this.$refs.resetDialog.isDisabled= true
            },
            async delProduct(row,index) {
                console.log(row);
                const data = await this.$Http.operationIntegralProduct({
                    id: row.id,
                    type: 3
                })
                console.log(data);
                if(data.code === 200){
                    this.$message.success(`积分商品${row.product_name},已成功删除！`)
                    this.$emit('productChange')
                }else {
                    this.$message.error('删除未成功请重新操作！')
                }
                this.$refs[`popover-${index}`].doClose()
            },
            reloadFun() {
                this.$emit('productChange')
            }

        }
    }
</script>

<style scoped>

</style>
